<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="app">
  <h1>slot作用域插槽</h1>
  <p>在父级中，具有scopet特殊属性的tempalte元素，可以用于接收
      子组件传递出来的数据，scope的值对应的一个临时变量名，次变量接收从值组件穿第的prop
      对象具有scope属性的template称为作用域插槽膜版
  </p>


  <my-component :items='myltems'>
      <template slot="item" scope='props'>
          <li class="my-fancy-item">
              {{props.username}}
              {{props.text}}
          </li>
      </template>
  </my-component>
    </div>
    <script >
      Vue.component('my-component',{
          props:['items'],
          template:
          '<ul><hr/><slot name="item" v-for="item in items" :username="item.username" :text="item.text"></slot><hr/></ul>',
         created:function(){
             close.log(this.items);
         }
      })
    var vm=new Vue({
        el:'#app',
        data:{
            myltems:[
                {username:'小慧',text:'毕业了'},
                {username:'小慧1',text:'毕业了'},
                {username:'小慧2',text:'毕业了'}
            ]
        }
    });
    </script>
</body>
</html>